<wicket:panel>
	<div class="issue-side">
		<div class="fields">
			<div class="body">
				<table>
					<tr wicket:id="fields">
						<td class="name"><span wicket:id="name"></span></td>
						<td class="values d-flex flex-nowrap"><div wicket:id="values"></div></td>
					</tr>
				</table>
			</div>
		</div>
		<wicket:enclosure child="confidential">
		<div class="confidential d-flex align-items-center justify-content-between">
			<div class="font-weight-bolder mr-3">Confidential</div>
			<div class="switch switch-sm switch-primary">
				<label>
					<input wicket:id="confidential" type="checkbox">
				</label>
			</div>
		</div>
		</wicket:enclosure>
		<div wicket:id="milestones" class="milestones">
			<div class="head">Milestones</div>
			<ul class="body list-unstyled mb-0">
				<li wicket:id="milestones" class="bg-light rounded p-3">
					<div class="d-flex">
						<a wicket:id="link" class="mr-2"><span wicket:id="label"></span></a>
						<a wicket:id="delete" class="mr-2 flex-shrink-0" title="Remove issue from this milestone"><wicket:svg href="trash" class="icon icon-sm"></wicket:svg></a>
						<span wicket:id="status" class="status ml-auto"></span> 
					</div>
					<div wicket:id="progress" class="mt-3"></div>
				</li>
				<wicket:enclosure>
				<li class="add">
					<input wicket:id="add" type="hidden" class="form-control">
				</li>
				</wicket:enclosure>
			</ul>
		</div>
		<div wicket:id="links" class="links">
			<wicket:container wicket:id="content"></wicket:container>
		</div>
		<div wicket:id="votes" class="votes">
			<div class="head">
				Issue Votes (<span wicket:id="count"></span>) 
			</div>
			<div class="body">
				<wicket:enclosure child="voters">
				<div class="voters">
					<span wicket:id="voters" class="mr-2 mb-3 d-inline-block"><a wicket:id="voter" class="avatar"></a></span> <a wicket:id="more">and more</a>
				</div>
				</wicket:enclosure>
				<a wicket:id="vote" class="btn btn-outline-secondary btn-sm vote"><wicket:svg href="thumb-up" class="icon mr-2"></wicket:svg> <span wicket:id="label"></span></a>
			</div>
		</div>
		<div wicket:id="watches" class="watches"></div>
		<div wicket:id="reference"></div>
		<wicket:enclosure child="delete">
			<div>
				<a wicket:id="delete" class="delete btn btn-light-danger">Delete</a>
			</div>
		</wicket:enclosure>
	</div>
	<wicket:fragment wicket:id="userFrag">
		<a wicket:id="avatar"></a> <a wicket:id="name"></a>
	</wicket:fragment>
	<wicket:fragment wicket:id="nonEmptyValuesFrag">
		<div wicket:id="values" class="value"><span wicket:id="value"></span></div>	
	</wicket:fragment>
	<wicket:fragment wicket:id="singleLinkFrag">
		<div class="head d-flex align-items-center">
			<span wicket:id="name" class="flex-shrink-0 mr-2"></span>
			<a wicket:id="edit" title="Edit" class="flex-grow-1 text-right"><wicket:svg href="gear" class="icon icon-sm"/></a>
		</div>
		<div wicket:id="body" class="body"></div>
	</wicket:fragment>
	<wicket:fragment wicket:id="linkedIssueFrag">
		<div class="bg-light rounded p-3">
			<div class="d-flex align-items-center number-and-state mb-2">
				<a wicket:id="reference" class="mr-2"><span wicket:id="label"></span></a>
				<a wicket:id="delete" class="mr-2 mb-1" title="Unlink this issue"><wicket:svg href="trash" class="icon icon-sm"/></a>
				<a wicket:id="state" class="state ml-auto"><span wicket:id="badge"></span></a>
			</div>
			<div class="title d-flex text-nowrap">
				<a wicket:id="title" class="text-truncate"><span wicket:id="label"></span></a>
			</div>
		</div>
	</wicket:fragment>
	<wicket:fragment wicket:id="unauthorizedLinkedIssueFrag">
		<div class="bg-light rounded p-3">
			<span wicket:id="number" class="mr-2"></span> <wicket:svg href="warning" class="icon"></wicket:svg> You are not authorized to access this issue
		</div>
	</wicket:fragment>
	<wicket:fragment wicket:id="multipleLinksFrag">
		<div wicket:id="name" class="head d-flex align-items-center"></div>
		<ul class="body linked-issues list-unstyled mb-0">
			<li wicket:id="linkedIssues"></li>
			<wicket:enclosure child="linkNew">
			<li class="new-link d-flex">
				<input wicket:id="linkNew" type="hidden" placeholder="Add existing" class="form-control">
				<a wicket:id="createNew" title="Create new" class="btn btn-icon btn-light ml-2"><wicket:svg href="plus" class="icon"></wicket:svg></a>
			</li>
			</wicket:enclosure>
		</ul>
	</wicket:fragment>
</wicket:panel>
